<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head th:include="include/admin/adminHeader::html('用户管理')" ></head>
<!--富文本编辑器-->

<script>
    var editor = null;
    $(function(){
        var data4Vue = {
            uri:'users',
            bean: { id: -1,username:'',password:'',realname:'',tel:'',df_address:'',emg_contact_name:'',emg_contact_num:'',del:0},

        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content   ;
                    });
                },
                add: function () {
                    if(!checkEmpty(this.bean.username, "账号"))
                        return;
                    if(!checkEmpty(this.bean.password, "密码"))
                        return;
                    if(!checkEmpty(this.bean.realname, "真实姓名"))
                        return;
                    var url = this.uri;
                    //axios.js 上传文件要用 formData 这种方式
                    alert(this.bean.df_addresss);
                    // bean: { id: 0,uid:0,uname:'',tel:'',describe:'',state:0,level:0,del:0},
                    var formData = new FormData();
                    formData.append("username", this.bean.username);
                    formData.append("password", this.bean.password);
                    formData.append("realname", this.bean.realname);
                    formData.append("tel", this.bean.tel);
                    formData.append("dfAddress", this.bean.df_address);
                    formData.append("emgContactName", this.bean.emg_contact_name);
                    formData.append("emgContactNum", this.bean.emg_contact_num);
                    axios.post(url,formData).then(function(response){
                        bean = { id: -1,username:'',password:'',realname:'',tel:'',df_address:'',emg_contact_name:'',emg_contact_num:'',del:0},
                        alert("注册成功!");
                    });
                },

            }
        });
    });



    // 封装 console.log 函数
    function printLog(title, info) {
        window.console && console.log(title, info);
    }

</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<body style="margin: 0px;padding: 0px;height: 100%">
<div id="workingArea" style="width: 100%;height: 100%;margin: 0">


    <div class="panel panel-primary" style="width: 100%;height: 100%;">
        <div class="panel-heading" style="height: 50px;line-height: 50px">注册账户</div>
    <div class="panel-body">
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-pencil"><span style="margin-left: 4px">账号</span></span>
            <input v-model.trim="bean.username" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-user"><span style="margin-left: 4px">密码</span></span>
            <input  v-model.trim="bean.password" type="password" class="form-control"  aria-describedby="basic-addon3">
        </div>
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-map-marker" ><span style="margin-left: 4px">真实姓名</span></span>
            <input v-model.trim="bean.realname" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-map-marker" ><span style="margin-left: 4px">电话</span></span>
            <input v-model.trim="bean.tel" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-send" ><span style="margin-left: 4px">地址</span></span>
            <input   v-model.trim="bean.df_address" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-map-marker" ><span style="margin-left: 4px">紧急联系人</span></span>
            <input v-model.trim="bean.emg_contact_name" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-map-marker" ><span style="margin-left: 4px">紧急联系人电话</span></span>
            <input v-model.trim="bean.emg_contact_num" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <tr class="submitTR">
            <td colspan="2" align="center">
                <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
            </td>
        </tr>
    </div>
</div>

</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">

</script>

</body>
</html>